<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .myclass1 {
        background: seashell;
    }

    .myclass2 {
        background: skyblue;
    }

    .myclass3 {
        background: tomato;
    }

    .myclass4 {
        background: orange;
    }

    .myclass5 {
        background: yellowgreen;
    }
</style>

<body>
    <h1 id="h1">今天还不错</h1>
    <div id="myDiv">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <div id="myDiv1">
        <span style="display:block">啦啦啦</span>
    </div>

    <div id="myDiv2">
    </div>

    <div id="myDiv3">
        点击搜啊的囧按实际迪欧时间爱哦大家阿斯顿蝴蝶花
    </div>
    <script>
        var arr = ["开心", "惊喜", "失落", "奋斗"]

        // 获取id名称为h1的元素  并赋值给变量 h1
        var h1 = document.getElementById('h1');
        // 获取id名称为myDiv元素下的所有span标签 并赋值给变量 spans
        var spans = document.getElementsByTagName('span');
        // 将id名称为h1的元素内容改为 "最近有点热，大家注意喝水"
        h1.innerHTML = '最近有点热，大家注意喝水';
        // 获取id名称为myDiv元素下的所有span标签 将每一个span里面的内容改为对应数组里面的元素值
        // spans[0].innerHTML = arr[0];  
        // spans[1].innerHTML = arr[1];  
        // spans[2].innerHTML = arr[2];  
        // spans[3].innerHTML = arr[0];  
        for (var i = 0; i < 4; i++) {
            spans[i].innerHTML = arr[i];

        }
        // 获取id名称为myDiv1下的span标签 给该标签随机一个类名为   myClass1   -   myClass5
        var a = document.getElementById('myDiv1')
        var b = a.getElementsByTagName('span');
        var c = Math.floor(Math.random() * 4 + 1)
        var d = 'myclass' + c
        // console.log(c)
        b[0].className = d;
        // 获取id名称为myDiv2的元素  给该元素添加ul标签同时ul标签的类名为ul  给ul加内部加入4个li标签  每个li标签的id名称 为li对应的下标
        var e = document.getElementById('myDiv2');
        e.innerHTML = '<ul class="ul"></ul>'
        var f = e.getElementsByTagName('ul');
        // f[0].innerHTML='<li></li>';
        // f[1].innerHTML='<li></li>';
        // f[2].innerHTML='<li></li>';
        // f[3].innerHTML='<li></li>';
        for (var j = 0; j < 4; j++) {
            f[0].innerHTML += '<li id=' + j + '></li>'
        }
        // 封装一个函数setColor   函数有一个参数为color  将传递过来的16进制的颜色值 赋值给 id名称为mydiv3的元素的背景颜色
        function setColor(color) {
            document.getElementById('myDiv3').style.background = color;
        }
        setColor('#0099ff');
    </script>
</body>

</html>